/* eslint-disable no-unused-vars */
<template>
  <div class="rootdiv">
    <div id="ballZodiac" style="width: 900px; float: left">
      <el-checkbox-group v-model="time" style="margin-bottom:-25px">
        <div class="zodiacDiv" v-for="zodiacV in timeOP" :key="zodiacV">
          <el-checkbox-button :label="zodiacV"> </el-checkbox-button>
        </div>
      </el-checkbox-group>
      <!-- @change="zodiacChange(zodiacOP[index])" -->
      <el-checkbox-group v-model="stuff" style="margin-bottom:-25px">
        <div class="zodiacDiv" v-for="zodiacV in stuffOP" :key="zodiacV">
          <el-checkbox-button :label="zodiacV"> </el-checkbox-button>
        </div>
      </el-checkbox-group>
      <el-checkbox-group v-model="zodiac">
        <div class="zodiacDiv" v-for="zodiacV in zodiacOP" :key="zodiacV">
          <el-checkbox-button @change="zodiacChange(zodiacV)" :label="zodiacV">
          </el-checkbox-button>
        </div>
      </el-checkbox-group>
      <div
        style="display: inline-block"
        v-for="ball in ballData"
        :key="ball.num"
      >
        <div
          class="ballDiv"
          :style="{ background: ball.bgColor }"
          @click="ballClick('left', ball.num - 1)"
          @contextmenu.prevent="ballClick('right', ball.num - 1)"
        >
          <el-button
            :style="{ visibility: ball.visibility }"
            :type="ball.btnType"
            circle
            >{{ fillZero(ball.num) }}</el-button
          >
        </div>
      </div>
      <div style="display: inline-block; margin: 10px 20px">
        <el-checkbox-button
          @change="zodiacControlCheckboxChange"
          label="生肖"
          v-model="zodiacControlCheckbox"
        >
        </el-checkbox-button>
      </div>
    </div>

    <!-- 右侧按钮div -->
    <div style="display: inline-block; margin: 20px 0 0 0">
      <div style="margin: 10px 10px 20px">
        <el-checkbox-button
          @change="zodiacControlCheckboxChange"
          label="生肖"
          v-model="zodiacControlCheckbox"
        >
        </el-checkbox-button>
      </div>

      <div>
        <el-checkbox-group v-model="oddEven" class="siftCheckbox">
          <el-checkbox-button
            @change="oddEvenChange(oeName)"
            v-for="oeName in oddEvenOP"
            :label="oeName"
            :key="oeName"
          ></el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group v-model="combineOE" class="siftCheckbox">
          <el-checkbox-button
            @change="combineOEChange(combineOEName)"
            v-for="combineOEName in combineOEOP"
            :label="combineOEName"
            :key="combineOEName"
          ></el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group v-model="combineSize" class="siftCheckbox">
          <el-checkbox-button
            @change="combineSizeChange(combineSizeName)"
            v-for="combineSizeName in combineSizeOP"
            :label="combineSizeName"
            :key="combineSizeName"
          ></el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group v-model="sizeCheckbox" class="siftCheckbox">
          <el-checkbox-button
            @change="sizeCheckboxChange(sizeV)"
            v-for="sizeV in sizeCheckboxOP"
            :label="sizeV"
            :key="sizeV"
          ></el-checkbox-button>
        </el-checkbox-group>

        <div class="colorCheckbox">
          <el-checkbox-group v-model="colors" class="siftCheckbox" size="mini">
            <div
              v-for="colorName in colorsOP"
              :key="colorName"
              style="display: inline-block; margin: 0 5px 0 0"
            >
              <el-checkbox-button
                @change="colorsChange(colorName)"
                :label="colorName"
              >
                <div
                  :style="{
                    color: colorBtnControl(colorName),
                  }"
                  style="font-family: '楷体'; border: 1px; border-radius: 50%; padding: -30px
									'楷体_GB2312'; font-size: 21px; background-color: white"
                >
                  {{ colorName }}
                </div>
              </el-checkbox-button>
              <div
                :style="{
                  'background-color': colorBtnControl(colorName),
                  height: '8px',
                }"
              ></div>
            </div>
          </el-checkbox-group>
        </div>

        <!-- <el-checkbox-group v-model="colors" class="siftCheckbox" size="mini">
          <el-button
            :type="colorBtnControl(colorName)"
            v-for="colorName in colorsOP"
            :key="colorName"
            circle
          >
            <el-checkbox-button
              @change="colorsChange(colorName)"
              :label="colorName"
              :key="colorName"
            >
            </el-checkbox-button>
          </el-button>
        </el-checkbox-group> -->
      </div>
    </div>

    <!-- <otherCheckBox></otherCheckBox> -->
  </div>
</template>

<script>
// import otherCheckBox from "@/components/otherCheckBox.vue";

export default {
  name: "BallGame",
  /* components: {
    otherCheckBox,
  }, */
  data() {
    return {
      zodiacControlCheckbox: true,
      zodiacInitV: false,
      zodiacOP: [
        "牛",
        "鼠",
        "猪",
        "狗",
        "鸡",
        "猴",
        "羊",
        "马",
        "蛇",
        "龙",
        "兔",
        "虎",
      ],
      zodiac: [],
      timeInitV: false,
      timeOP: [
        "一 ",
        "一",
        "三 ",
        "五 ",
        "二",
        "四 ",
        "六 ",
        "六",
        "四",
        "二 ",
        "五",
        "三",
      ],
      time: [],
      stuffInitV: false,
      stuffOP: [
        "土 ",
        "水 ",
        "水",
        "土  ",
        "金 ",
        "金",
        "土",
        "火 ",
        "火",
        "土   ",
        "木 ",
        "木",
      ],
      stuff: [],
      oeInitV: false,
      oddEvenOP: ["单", "双"],
      oddEven: [],
      combineOEInitV: false,
      combineOEOP: ["合单", "合双"],
      combineOE: [],
      combineSizeInitV: false,
      combineSizeOP: ["合大", "合小"],
      combineSize: [],
      sizeCheckboxInitV: false,
      sizeCheckboxOP: ["大", "小"],
      sizeCheckbox: [],
      colorsInitV: false,
      colorsOP: ["红", "绿", "蓝"],
      colors: [],
      redn: [1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46],
      greenn: [
        5,
        6,
        11,
        16,
        17,
        21,
        22,
        27,
        28,
        32,
        33,
        38,
        39,
        43,
        44,
        47,
        49,
      ],
      bluen: [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 48],
      ballData: [],
    };
  },
  watch: {
    /* zodiac(zodiacChecked) {
      if (!this.zodiacInitV) {
        // 页面加载时引起的数据变化，直接退出
        return;
      }

      if ([0, 12].indexOf(zodiacChecked.length) == -1) {
        //console.log(zodiacChecked.length, oldval.length);
        // 不是所有的生肖按钮状态变化时，退出
        return;
      }
      if (zodiacChecked.length == 0) {
        // 选中的情况
        for (let i = 0; i < this.ballData.length; i++) {
          this.ballData[i].visibility = "hidden";
        }
      } else if (zodiacChecked.length == 12) {
        for (let i = 0; i < this.ballData.length; i++) {
          this.ballData[i].visibility = "visible";
        }
      }
    }, */

    /* colors(currentChecked, oldVal) {
    }, */

    sizeCheckbox(currentChecked, oldVal) {
      if (!this.sizeCheckboxInitV) {
        return;
      }

      this.setVisibilityByName(
        currentChecked,
        oldVal,
        this.sizeCheckboxSetVisibility,
        this.sizeCheckboxOP
      );
    },

    oddEven(currentChecked, oldVal) {
      if (!this.oeInitV) {
        return;
      }

      this.setVisibilityByName(
        currentChecked,
        oldVal,
        this.oeSetVisibility,
        this.oddEvenOP
      );

      // 联动生肖按钮的显示隐藏
      let zodiacBallNum = {};
      let zodiacVisibility = {};
      this.ballData.forEach((ball) => {
        if (zodiacBallNum[ball.zodiac]) {
          zodiacBallNum[ball.zodiac].push(ball.num);
        } else {
          zodiacBallNum[ball.zodiac] = [ball.num];
        }
      });

      for (let key in zodiacBallNum) {
        zodiacBallNum[key].forEach((num) => {
          if (this.ballData[num - 1]["visibility"] == "visible") {
            zodiacVisibility[key] = true;
          }
        });
      }

      let zodiacVisible = [];
      for (let key in zodiacVisibility) {
        zodiacVisible.push(key);
      }
      this.zodiac = zodiacVisible;
    },

    combineOE(currentChecked, oldVal) {
      if (!this.combineOEInitV) {
        return;
      }

      this.setVisibilityByName(
        currentChecked,
        oldVal,
        this.combineOESetVisibility,
        this.combineOEOP
      );
    },

    combineSize(currentChecked, oldVal) {
      if (!this.combineSizeInitV) {
        return;
      }

      this.setVisibilityByName(
        currentChecked,
        oldVal,
        this.combineSizeSetVisibility,
        this.combineSizeOP
      );
    },
  },
  computed: {},
  created() {
    // 一些数据初始化
    this.zodiac = this.zodiacOP;
    this.oddEven = this.oddEvenOP;
    this.combineOE = this.combineOEOP;
    this.combineSize = this.combineSizeOP;
    this.sizeCheckbox = this.sizeCheckboxOP;
    this.colors = this.colorsOP;

    let tmpDict;
    for (let i = 1; i <= 49; i++) {
      tmpDict = { visibility: "visible", num: i };
      tmpDict["siftflag"] = new Set([]);
      tmpDict["bgColor"] = "whitesmoke";
      if (this.redn.indexOf(i) > -1) {
        tmpDict["btnType"] = "danger";
        tmpDict["color"] = "红";
      } else if (this.greenn.indexOf(i) > -1) {
        tmpDict["btnType"] = "success";
        tmpDict["color"] = "绿";
      } else if (this.bluen.indexOf(i) > -1) {
        tmpDict["btnType"] = "primary";
        tmpDict["color"] = "蓝";
      }
      tmpDict["zodiac"] = this.zodiac[(i - 1) % 12];
      this.ballData.push(tmpDict);
    }
    //console.log(this.ballData);
  },
  methods: {
    colorsChange(colorName) {
      // this.colorsInitV = true;

      let visibilityV =
        this.colors.indexOf(colorName) > -1 ? "visible" : "hidden";
      let condition;

      for (let ballIndex = 0; ballIndex < this.ballData.length; ballIndex++) {
        condition = this.ballData[ballIndex].color == colorName ? true : false;
        this.setVisibility(condition, ballIndex, visibilityV, "zodiacHidden");
      }
    },

    sizeCheckboxChange() {
      this.sizeCheckboxInitV = true;
    },
    sizeCheckboxSetVisibility(firstOrSecondOP, visibilityV) {
      let num;
      let condition;

      for (let ballIndex = 0; ballIndex < this.ballData.length; ballIndex++) {
        num = ballIndex + 1;

        if (firstOrSecondOP == "大") {
          condition = num >= 25 ? true : false;
        } else {
          condition = num < 25 ? true : false;
        }
        this.setVisibility(condition, ballIndex, visibilityV, "sizeHidden");
      }
    },

    oddEvenChange() {
      this.oeInitV = true;
    },
    oeSetVisibility(firstOrSecondOP, visibilityV) {
      let oddOrEvenFlag = firstOrSecondOP == "单" ? 1 : 0;
      let num;
      let condition;
      for (let ballIndex = 0; ballIndex < this.ballData.length; ballIndex++) {
        num = ballIndex + 1;
        condition = num % 2 == oddOrEvenFlag ? true : false;
        this.setVisibility(condition, ballIndex, visibilityV, "oeHidden");
      }
    },

    combineOEChange() {
      // 判断是自己点的，而不是页面加载时数据的变化
      this.combineOEInitV = true;
    },
    combineOESetVisibility(firstOrSecondOP, visibilityV) {
      let oddOrEvenFlag = firstOrSecondOP == "合单" ? 1 : 0;
      let num;
      let combineV;
      let condition;
      for (let ballIndex = 0; ballIndex < this.ballData.length; ballIndex++) {
        num = ballIndex + 1;
        combineV = (parseInt(num / 10) + (num % 10)) % 2;
        condition = combineV == oddOrEvenFlag ? true : false;
        this.setVisibility(condition, ballIndex, visibilityV, "combineHidden");
      }
    },

    combineSizeChange() {
      // 判断是自己点的，而不是页面加载时数据的变化
      this.combineSizeInitV = true;
    },
    combineSizeSetVisibility(firstOrSecondOP, visibilityV) {
      let num;
      let condition;
      let combineV;

      for (let ballIndex = 0; ballIndex < this.ballData.length; ballIndex++) {
        num = ballIndex + 1;
        combineV = parseInt(num / 10) + (num % 10);

        if (firstOrSecondOP == "合大") {
          condition = combineV >= 8 ? true : false;
        } else {
          condition = combineV < 8 ? true : false;
        }
        this.setVisibility(
          condition,
          ballIndex,
          visibilityV,
          "combineSizeHidden"
        );
      }
    },

    zodiacControlCheckboxChange(checked) {
      if (checked) {
        this.zodiac = this.zodiacOP;
      } else {
        this.zodiac = [];
      }
      this.zodiacOP.forEach((zodiacName) => {
        this.zodiacChange(zodiacName);
      });
    },
    zodiacChange(zodiacName) {
      this.zodiacInitV = true;

      let visibilityV =
        this.zodiac.indexOf(zodiacName) > -1 ? "visible" : "hidden";
      let condition;

      for (let ballIndex = 0; ballIndex < this.ballData.length; ballIndex++) {
        condition =
          this.ballData[ballIndex].zodiac == zodiacName ? true : false;
        this.setVisibility(condition, ballIndex, visibilityV, "zodiacHidden");
      }
    },

    //// 公共方法开始
    // 在最后一个按钮取消选中，自动让另一个选中
    // 判断出哪个这个checkbox group 里的两个中哪个需要显示或者隐藏
    setVisibilityByName(
      currentChecked,
      oldVal,
      SetVisibilityMethod,
      thisCheckedNameArrOP
    ) {
      let visibilityV = "visible";
      let currentCheckedSize = currentChecked.length;
      let anotherOP;

      // 两个按钮当前选中的的三种情况：0,1,2
      if (currentCheckedSize == 0) {
        // 两个都取消了，所以自动选中另一个
        if (oldVal[0] == thisCheckedNameArrOP[0]) {
          // 点击的是第一个
          anotherOP = [thisCheckedNameArrOP[1]];
          this.switchChecked(thisCheckedNameArrOP, anotherOP);
          SetVisibilityMethod(thisCheckedNameArrOP[1], visibilityV);
        } else {
          // 点击的是第二个
          anotherOP = [thisCheckedNameArrOP[0]];
          this.switchChecked(thisCheckedNameArrOP, anotherOP);
          SetVisibilityMethod(thisCheckedNameArrOP[0], visibilityV);
        }
      } else {
        if (currentCheckedSize == 1) {
          // 是取消
          visibilityV = "hidden";
          if (currentChecked[0] == thisCheckedNameArrOP[0]) {
            // 点击的是双
            SetVisibilityMethod(thisCheckedNameArrOP[1], visibilityV);
          } else {
            SetVisibilityMethod(thisCheckedNameArrOP[0], visibilityV);
          }
        } else {
          // 当前两个都选中的情况
          if (oldVal[0] == thisCheckedNameArrOP[0]) {
            // 旧值里是单时，说明点击的是双
            SetVisibilityMethod(thisCheckedNameArrOP[1], visibilityV);
          } else {
            SetVisibilityMethod(thisCheckedNameArrOP[0], visibilityV);
          }
        }
      }
    },
    switchChecked(thisCheckedNameArrOP, anotherOP) {
      switch (thisCheckedNameArrOP) {
        case this.oddEvenOP:
          this.oddEven = anotherOP; // 会再次执行watch 里的方法
          break;
        case this.combineOEOP:
          this.combineOE = anotherOP;
          break;
        case this.combineSizeOP:
          this.combineSize = anotherOP;
          break;
        case this.sizeCheckboxOP:
          this.sizeCheckbox = anotherOP;
          break;
      }
    },

    setVisibility(condition, ballIndex, visibilityV, hiddenFlag) {
      if (condition) {
        if (visibilityV == "hidden") {
          this.ballData[ballIndex]["siftflag"].add(hiddenFlag);

          if (this.ballData[ballIndex].visibility != visibilityV) {
            if (!this.ballData[ballIndex]["siftflag"].has("ballVisible")) {
              this.ballData[ballIndex].visibility = visibilityV;
            }
          }
        } else if (
          this.ballData[ballIndex]["siftflag"].has(hiddenFlag) ||
          this.ballData[ballIndex]["siftflag"].size == 0
        ) {
          this.ballData[ballIndex]["siftflag"].delete(hiddenFlag);

          if (
            this.ballData[ballIndex].visibility != visibilityV &&
            this.ballData[ballIndex]["siftflag"].size == 0
          ) {
            this.ballData[ballIndex].visibility = visibilityV;
          }
        }
      }
    },
    //// 公共方法结束

    ballClick(whichclick, nIndex) {
      if (whichclick == "left") {
        if (this.ballData[nIndex].visibility == "visible") {
          this.ballData[nIndex]["siftflag"].add("ballHidden");
          this.ballData[nIndex].visibility = "hidden";
          this.ballData[nIndex].bgColor = "Gray";
        } else {
          this.ballData[nIndex]["siftflag"].delete("ballHidden");
          this.ballData[nIndex].visibility = "visible";
          this.ballData[nIndex].bgColor = "whitesmoke";
        }
      } else {
        if (this.ballData[nIndex]["siftflag"].has("ballVisible")) {
          this.ballData[nIndex]["siftflag"].delete("ballVisible");
          this.ballData[nIndex]["siftflag"].add("ballHidden");
          this.ballData[nIndex].visibility = "hidden";
          this.ballData[nIndex].bgColor = "Gray";
        } else {
          this.ballData[nIndex]["siftflag"].add("ballVisible");
          this.ballData[nIndex].visibility = "visible";
          this.ballData[nIndex].bgColor = "Cyan";
        }
      }
    },

    // 颜色按钮显示方法
    colorBtnControl(colorName) {
      //return 'success'
      if (colorName == "红") {
        return "red";
      } else if (colorName == "绿") {
        return "green";
      } else if (colorName == "蓝") {
        return "blue";
      }
      //console.log(num)
      //return 'green'
    },
    fillZero: function(num) {
      return num < 10 ? "0" + num : num;
    },
  },
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.colorCheckbox .el-checkbox-button__inner {
  border-radius: 10;
  /* background-color: rgb(0, 255, 13); */
}
.colorCheckbox .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: #49cce4ee;
  /* border-color: #370dcf; */
}

.colorCheckbox .el-checkbox-button__original {
  border-radius: 5;
  /* background-color: red; */
}
.colorCheckbox .el-checkbox-button {
  color: #a8a8a8;
}
.colorCheckbox .el-checkbox-button.is-checked {
  /* background-color: #fa2145; */
  border-color: #370dcf;
}

.siftCheckbox {
  margin: 8px 10px;
}

.ballDiv {
  /* background-color: whitesmoke; */
  margin: 10px 15px;
}

.zodiacDiv {
  display: inline-block;
  margin: 10px 8px;
}

/* .el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #fff;
  background-color: #ff404a;
  border-color: #409eff;
  box-shadow: -1px 0 0 0 #8cc5ff;
} */
</style>
